<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE-Axios练习</title>
	</head>
	<body>
		<!-- 定义VUE根标签 -->
		<div id="app">
				<div align="center">
						<h1 align="center">用户新增</h1>
						名称: <input type="text" v-model.trim="addUser.name"/>
						年龄: <input type="text" v-model.number="addUser.age"/>
						性别: <input type="text" v-model.trim="addUser.sex"/>
						<button @click="addUserMe">新增</button>
				</div>
				<hr />
				<table id="tab1" border="1px" align="center" width="80%">
					<tr>
						<td colspan="5" align="center"><h1>用户列表</h1></td>
					</tr>
					<tr align="center">
						<td>编号</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
					<!-- 指令: 可以循环数据+标签  v-for -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>

						<td>
							<button>修改</button>
							<button>删除</button>
						</td>
					</tr>
				</table>
		</div>
			
		<!-- 1.引入VUE.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入Axios.js -->
		<script src="../js/axios.js"></script>
		
		<!-- 
				需求分析1:
					1.当用户打开页面时就应该发起Ajax请求获取userList数据.
					2.将userList数据 在页面中展现  
							2.1页面中的数据必须在data中定义
							2.2 ajax请求的结果赋值给data属性
					3.利用v-for指令实现数据遍历
					
				需求分析2:  用户数据入库操作
					1.在页面中准备用户新增文本框/按钮
					2.准备双向数据绑定的规则
					3.为按钮添加事件,实现数据新增入库.
							
		 -->
		<script>
				//设定axios请求前缀
				axios.defaults.baseURL = "http://localhost:8088"
				const app = new Vue({
					el: "#app",
					data: {
						//1.定义集合数据 null
						userList: [],
						//2.定义addUser对象  新增的用户数据
						addUser: {
							name: '',
							age: 0,
							sex: ''
						}
					},
					methods: {
						//1.定义getuserList方法 获取后台服务器数据
						async getUserList(){
							let{data: result} = await axios.get("/vue/getUserList")
							//ajax调用之后,将数据给属性.
							this.userList = result
						},
						//新增操作 请求类型: post  接收时需要使用json方式处理
						async addUserMe(){
								//不需要返回值
								await axios.post("/vue/insertUser",this.addUser)
								//将列表页面重新刷新
								this.getUserList()
						}
					},
					//调用生命周期函数
					mounted(){
						//console.log("vue对象实例化成功!!!!")
						//初始化时调用getUserList()
						this.getUserList()
					}
				})
		</script>
	</body>
</html>
